<!-- 道岔配置面板 -->
<template>
    <el-card class="turnout-config-card">
        <template #header>
            <span> {{ turnoutData.name || "<未命名道岔>" }}</span>
            <div class="flex-spacer"></div>
            <div class="card-header">
                <ElButtonGroup class="config-title-buttongroup">
                    <ElButton @click="deleteTurnoutConfig" type="danger">
                        <ElIcon>
                            <Delete></Delete>
                        </ElIcon>
                    </ElButton>
                </ElButtonGroup>
            </div>
        </template>
        <div class="form-row">
            <ElInput v-model="turnoutData.name" placeholder="道岔名称" />
        </div>
        <div class="form-row">
            <p class="form-label">道岔类型配置</p>
            <ElSelect v-model="turnoutData.type" style="flex-grow: 1;">
                <ElOption v-for="turnoutType in turnoutTypes" :key="turnoutType.value" :label="turnoutType.label"
                    :value="turnoutType.value">{{ turnoutType.label }}</ElOption>
            </ElSelect>
        </div>
        <div class="magnet-config" v-for="magnet, i in turnoutData.magnets" :key="i">
            <div class="magnet-item">
                <div class="form-row">
                    <p class="form-label">控制器选择</p>
                    <ControllerSelect v-model="magnet.ground_controller_name"/>
                </div>
                <div class="form-row">
                    <p class="form-label">电磁铁绑定</p>
                    <ElInput v-model="magnet.index" :min="0" :max="16" type="number" />
                </div>
            </div>
        </div>
    </el-card>
    <!-- 选择道岔的类型 -->

</template>
<style lang="css">
.turnout-config-card {
    max-width: 320px;
    margin-bottom: 12px;
    margin-right: 12px;
}

.config-title-buttongroup {
    margin-left: 12px;
    display: flex !important;
    flex-wrap: nowrap;
}

.el-card__header {
    display: flex;
    flex-direction: row;
    align-items: center;
}
</style>
<script setup lang="ts">
import { defineProps, PropType, ref, watch, onBeforeMount, onMounted, defineEmits, nextTick } from "vue"
import { Turnout, MagnetConfig, TURNOUT_TYPES } from "../../models"
import { ElButton, ElOption, ElSelect, ElInputNumber, ElButtonGroup, ElIcon, ElMessageBox } from "element-plus";
import { Delete } from "@element-plus/icons-vue"
import { deepCopy } from "element-sci-ui"
import { ControllerSelect } from "../../widgets";

const props = defineProps({
    turnout: {
        type: Object as PropType<Turnout>,
        required: true
    }
})

const emits = defineEmits([
    'update:turnout', "delete-turnout"
])

// 将props中的turnout数据复制一次
const turnoutData = ref<Turnout>({
    name: "",
    type: "left_hand_turnout",
    magnets: [],
    // state: "normal"
})

watch(() => props.turnout, async () => {
    allowChangeWatch = false
    turnoutData.value = deepCopy(props.turnout)
    await nextTick()
    allowChangeWatch = true
})

watch(() => turnoutData.value.type, () => {
    console.log("turnoutData type changed", turnoutData.value.type)
    updateMagnets(turnoutData.value.type)
})

// 当道岔类型发生变更时，需要对应修改电磁铁的对应关系。
const updateMagnets = (turnoutType: TURNOUT_TYPES) => {
    let magnetNum = 0
    if (turnoutType === "left_hand_turnout" || turnoutType === "right_hand_turnout" || turnoutType == "bilateral_turnout") {
        magnetNum = 1
    } else if (turnoutType === "three_row_turnout") {
        magnetNum = 2
    }

    if (magnetNum == 0) {
        return
    } else {
        if (magnetNum > turnoutData.value.magnets.length) {
            for (let i = turnoutData.value.magnets.length; i < magnetNum; i++) {
                turnoutData.value.magnets.push({
                    ground_controller_name: "",
                    index: 0,
                    reversed: false
                })
            }
        } else {
            for (let i = magnetNum; i < turnoutData.value.magnets.length; i++) {
                turnoutData.value.magnets.pop()
            }
        }
    }

    if (turnoutData.value.magnets.length == 0) {
        turnoutData.value.magnets.push({
            ground_controller_name: "",
            index: 0,
            reversed: false
        })
    } else if (turnoutData.value.magnets.length == 1) {
        return
    }
}

let allowChangeWatch = false
const deleteTurnoutConfig = () => {
    ElMessageBox.confirm("确定删除该道岔配置吗？删除后信息无法找回", "删除道岔配置", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        allowChangeWatch = true
        emits("delete-turnout")
    })

}
// 当数据更新时，发出相应的事件
watch(turnoutData, () => {
    if (allowChangeWatch) {
        emits("update:turnout", turnoutData.value)
    }
}, { deep: true })

onMounted(async () => {
    allowChangeWatch = false
    turnoutData.value = deepCopy(props.turnout)
    await nextTick()
    allowChangeWatch = true
})


const turnoutTypes = [{
    label: "左开道岔", value: "left_hand_turnout"
}, {
    label: "右开道岔", value: "right_hand_turnout"
}, {
    label: "对称道岔", value: "bilateral_turnout"
}, {
    label: "三开道岔", value: "three_row_turnout"
}
]
</script>